<template>
  <div class="container">
    <div class="statisticsTitleSty">投诉处理</div>
    <div
      :class="[isWidth ? '' : 'complaintTable', 'complaintBox']"
      ref="complaintBox"
    >
      <div @mouseover="ncrFormat" @mouseleave="leave">
        <el-table
          class="statisticsTitleStyTable"
          :data="tableList"
          :header-cell-style="{
            background: 'transparent !important',
            color: '#04AFF6',
            borderBottom: 0,
          }"
          highlight-current-row
          ref="tableRef"
          @row-click="clickRow"
        >
          <el-table-column
            prop="statusDesc"
            label="处理状态"
            :width="isWidth ? '100px' : '80px'"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <p
                class="commonSty"
                :class="[
                  {
                    yellowColor: scope.row.status === 'WAIT_ACCEPT',
                    blueColor: scope.row.status === 'ACCEPTING',
                    greenColor: scope.row.status === 'ACCEPTED',
                  },
                ]"
              >
                {{ scope.row.statusDesc }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="complaintName"
            label="企业名称"
            width="160px"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.complaintName"
                :columnName="'complaintName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="complaintRemark"
            label="欠薪内容"
            width="230"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.complaintRemark"
                :columnName="'complaintRemark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="complaintManagerId"
            label="跟踪人"
            min-width="230px"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.complaintManagerId"
                :columnName="'complaintManagerId'"
              ></copyText>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'illegalRecords',
  data() {
    return {
      recordsData: {
        total: '',
        scale: '',
        success: '',
      }, //违法记载
      isWidth: true,
      recordsChart: '',
      tableList: [],
      intNum: null,
    }
  },
  props: {
    area: {
      type: String,
      default: '',
    },
  },
  watch: {
    area(val) {
      this.getComplaintData(val)
    },
  },
  created() {},

  mounted() {
    const windowWidth = window.screen.width
    const windowHeight = window.screen.height
    if (windowWidth <= 1440) {
      this.isWidth = false
    }
    // let div = document.getElementsByClassName("el-table__body-wrapper")[0];
    let div = document.getElementsByClassName('statisticsTitleStyTable')[0]
      .children[2]
    if (this.isWidth) {
      div.style.height = this.$refs.complaintBox.offsetHeight - 55 + 'px'
    }
    this.getComplaintData(this.area)
  },
  destroyed() {
    clearInterval(this.intNum)
  },
  methods: {
    getHeight(val) {
      // let div = document.getElementsByClassName("el-table__body-wrapper")[0];
      let div = document.getElementsByClassName('statisticsTitleStyTable')[0]
        .children[2]
      if (val) {
        if (this.isWidth) {
          div.style.height = this.$refs.complaintBox.offsetHeight - 60 + 'px'
        } else {
          div.style.height = this.$refs.complaintBox.offsetHeight - 49 + 'px'
        }
      } else {
        if (this.isWidth) {
          div.style.height = this.$refs.complaintBox.offsetHeight - 49 + 'px'
        } else {
          div.style.height = this.$refs.complaintBox.offsetHeight - 40 + 'px'
        }
      }
    },
    getComplaintData(areaId) {
      this.axios({
        method: 'post',
        url: 'api-r/ezrightbackpay/expand/list',
        data: {
          pageNo: 1,
          pageSize: 20,
          areaId: areaId,
        },
      }).then((res) => {
        this.tableList = []
        this.tableList = res.data.result.results
        if (this.$refs.tableRef) {
          this.$refs.tableRef.doLayout()
        }

        if (this.tableList.length > 3) {
          this.getright_table()
          // if(this.intNum) {
          //     clearInterval(this.intNum)
          // }
          // this.intNum = setInterval(() =>{
          //     this.tableMove()
          // },2000)
          // this.$once('hook:beforeDestroy',() => {
          //     clearInterval(this.intNum)
          // })
        }
      })
      //     .catch((error) => {
      //         this.$message({
      //             showClose: true,
      //             duration: 3000,
      //             message: "获取数据失败11",
      //             type: "error",
      //         });
      // });
    },
    ncrFormat() {
      if (this.tableList.length > 3) {
        clearInterval(this.intNum)
      }
    },
    leave() {
      if (this.tableList.length > 3) {
        this.getright_table()
        // this.intNum = setInterval(() =>{
        //     this.tableMove()
        // },2000)
      }
    },
    getright_table() {
      this.$nextTick(() => {
        let div = document.getElementsByClassName('statisticsTitleStyTable')[0]
        let t = div.getElementsByClassName('el-table__body')[0]
        // let t = document.getElementsByClassName("el-table__body")[0];
        if (this.intNum) {
          clearInterval(this.intNum)
        }
        this.intNum = setInterval(() => {
          if (this.tableList.length > 3) {
            var data = this.tableList[0]
            setTimeout(() => {
              this.tableList.push(data)
              t.style.transition = 'all .5s'
              t.style.marginTop = '-41px'
            }, 500)
            setTimeout(() => {
              this.tableList.splice(0, 1)
              t.style.transition = 'all 0s ease 0s'
              t.style.marginTop = '0'
            }, 1000)
          }
        }, 2000)
        this.$once('hook:beforeDestroy', () => {
          clearInterval(this.intNum)
        })
      })
    },
    // tableMove(){
    //     this.$nextTick(() => {
    //         // 48px 为表格行高
    //         let div = document.getElementsByClassName('statisticsTitleStyTable')[0];
    //         let t = div.getElementsByClassName('el-table__body')
    //         var data = this.tableList[0];
    //         setTimeout(() =>{
    //             this.tableList.push(data);
    //             t[0].style.transition = "all .5s";
    //             t[0].style.marginTop = "-41px";
    //         },500)
    //         setTimeout(() =>{
    //             this.tableList.splice(0, 1);
    //             t[0].style.transition = "all 0s ease 0s";
    //             t[0].style.marginTop = "0";
    //         },1000)
    //     })
    // },
    clickRow(row, column, event) {
      this.$router.push({
        path: '/home/unpaidComplaint/caseDetailLzh',
        name: 'caseDetailLzh',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/unpaidComplaint/esCaseList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  height: 100%;
  .statisticsTitleSty {
    height: 30px;
    line-height: 30px;
    padding-left: 12px;
    font-weight: 500;
    color: #5bfcf4;
    font-size: 16px;
    background: url('../../assets/titleBox.png') center center no-repeat;
    background-size: cover;
  }
  .complaintBox {
    height: calc(100% - 30px);
    background-color: transparent;
    padding: 0 10px;
  }
  .complaintTable /deep/ .el-table th > .cell {
    padding: 6px 10px;
    font-size: 12px;
  }
  .complaintTable /deep/.el-table td > .cell {
    padding: 6px 10px;
    font-size: 12px;
  }
}
/deep/ .el-table {
  color: #b8e8fa;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
  color: #b8e8fa;
}
/deep/ .el-table__row:hover > td {
  background-color: transparent !important;
  cursor: pointer;
}

/deep/ .el-table__row--striped:hover > td {
  background-color: transparent !important;
}
/deep/ ::-webkit-scrollbar-thumb {
  background-color: #31405c;
}
/deep/::-webkit-scrollbar-track-piece {
  background-color: #98a0ae !important;
  opacity: 0.2;
}
/deep/ .el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #0b244c;
}
/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #0b244c;
}
/deep/ .el-table__body tr.current-row > td {
  background-color: transparent !important;
}
.statusSty {
  padding: 5px;
  border: 1px solid #009588;
  font-size: 12px;
  color: #009588;
}
.greenColor {
  border: 1px solid #88fcb2;
  color: #88fcb2;
}
.yellowColor {
  border: 1px solid #ffd725;
  color: #ffd725;
}
.blueColor {
  border: 1px solid #60c9f7;
  color: #60c9f7;
}
.commonSty {
  width: 45px;
  height: 20px;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}
</style>
